<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>1-5-1</title>
    <style type="text/css">
      #menu {
        width:300px;
      }
      .has_children{
        background : #555;
        color :#fff;
        cursor:pointer;
      }
      .highlight{
        color : #fff;
        background : green;
      }
      div{
        padding:0;
      }
      div a{
        background : #888;
        display : none;
        float:left;
        width:300px;
      }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <!--
      //等待dom元素加载完毕.
$(document).ready(function(){
	$(".has_children").click(function(){
		$(this).addClass("highlight")			//为当前元素增加highlight类
			.children("a").show().end()			//将子节点的a元素显示出来并重新定位到上次操作的元素
		.siblings().removeClass("highlight")		//获取元素的兄弟元素，并去掉他们的highlight类
			.children("a").hide();				//将兄弟元素下的a元素隐藏
	});
});
    -->
    <script type="text/javascript">
      $(function(){
        $("#menu div").click(function(){
          $(this).children("a").css("display", "inline").end().siblings().children("a").css("display", "none");
          $(this).addClass("highlight").siblings().removeClass().addClass("has_children");
        });
      });
    </script>
  </head>
  <body>
    <div id="menu">
      <div class="has_children">
        <span>用户管理</span>
        <a>添加用户</a>
        <a>更新用户</a>
        <a>删除用户</a>
        <a>查询用户</a>
      </div>
      <div class="has_children">
        <span>权限管理</span>
        <a>创建权限</a>
        <a>更改权限</a>
        <a>分配权限</a>
        <a>浏览权限</a>
      </div>
      <div class="has_children">
        <span>产品管理</span>
        <a>添加产品</a>
        <a>删除产品</a>
        <a>浏览产品</a>
        <a>更新产品</a>
      </div>

    </div>
  </body>
</html>